<link rel="stylesheet" href="/assets/home/css/details.css">
<link rel="stylesheet" href="/assets/home/css/search.css">
<link rel="stylesheet" href="/assets/home/plugin/mescroll/mescroll.min.css">
<script src="/assets/home/plugin/mescroll/mescroll.min.js"></script>

<body>
    <!-- 评论内容 -->
    <div id="mescroll" class="mescroll">
        <ul id="list" class="mui-table-view"></ul>
    </div>
</body>

<script>
    var mescroll = new MeScroll('mescroll',{
        down:{
            auto:false,
            callback:DownCallback
        },
        up:{
            page:{
                page:0,
                size:20,
                time:null
            },
            auto:true,
            isBounce:false,
            callback:UpCallBack,
            htmlNodata:`<div class="more">没有更多了...</div>`,
            toTop:{
            duration:600,
            src:"/assets/home/images/mescroll-totop.png",
            offset:100
            }
        }
    })

    function DownCallback(){
        mescroll.resetUpScroll();
        $("#list").empty();
    }

    function UpCallBack(current){
        // 当前页码值
        page = current.num
        limit = current.size
        subid = `{$subject.id}`
        // console.log(page,limit,subid);

        // 组装数据
        var data = {
            page,
            limit,
            subid
        }

        $.ajax({
            url:`{:url('home/index/comment_list')}`,
            type:'post',
            data:data,
            dataType:'json',
            success:function(success){
                if(success.code == 0){
                    mui.toast(success.msg,{duration:1000})

                    mescroll.endBySize(0,0)
                    return false
                }

                var list = success.data.list
                var count = success.data.count

                mescroll.endBySize(list.length,count)
                FetchList(list)
            },
            error:function(error){
                console.log(error);
            }
        })
    }

    function FetchList(list){
        var html = ''
    
        for(var item of list){
            html += `
            <li class="mui-table-view-cell mui-media">
                <a href="javascript:;">
                    <img class="mui-media-object mui-pull-left userimg" src="${item.business.avatar_text}">
                    <div class="mui-media-body">
                        ${item.business.nickname ? item.business.nickname : '匿名'}
                        <p class='mui-ellipsis'>${item.content}</p>
                    </div>
                </a>
            </li>
            `
        }   
        $("#list").append(html)
    }


</script>
